<template>
    <el-form ref="educationStatRef" :model="form" :rules="curRules" :validate-on-rule-change="false" label-width="108px">
        <el-card class="w-full mt-[10px]">
            <CardHead> {{props.title}} </CardHead>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="统计年度" prop="statYear">
                    <el-select v-model="form.statYear" placeholder="请选择年度" @change="handleChangeStatYear">
                        <el-option
                        v-for="dict in yearOptions"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="归属统计" prop="subjectClassId">
                    <el-radio-group v-model="form.subjectClassId" @change="handleChangeSubjectClassId">
                        <el-radio
                        v-for="dict in cfg_category_jybtjgs"
                        :key="dict.value"
                        :value="dict.value"
                        >{{dict.label}}</el-radio>
                    </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="8">

                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="机构类型" prop="unitType" v-if="form.subjectClassId==='2'">
                    <el-radio-group v-model="form.unitType">
                        <el-radio
                        v-for="dict in cfg_category_jgxz"
                        :key="dict.value"
                        :value="dict.value"
                        >{{dict.label}}</el-radio>
                    </el-radio-group>
                    </el-form-item>
                    <el-form-item label="机构类型" prop="unitType" v-else-if="form.subjectClassId==='1'">
                    <el-tree-select
                        v-model="selectedIds"
                        :data="cfg_category_jglx"
                        multiple
                        :render-after-expand="false"
                        show-checkbox
                        collapse-tags
                        collapse-tags-tooltip
                        :max-collapse-tags="1"
                        @change="handleChangeUnitType1"
                    >
                        <template #header>  
                            <el-checkbox v-model="isAllSelected"  @change="toggleSelectAll">  全选  </el-checkbox>  
                        </template>  
                    </el-tree-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机构类别" prop="unitClsType" v-if="form.subjectClassId==='2'">
                    <el-select v-model="form.unitClsType" placeholder="请选择机构类别">
                        <el-option
                        v-for="dict in cfg_category_jglb"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="批准部门" prop="approvalDept" v-else-if="form.subjectClassId==='1'">
                    <el-select v-model="form.approvalDept" placeholder="请选择批准部门">
                        <el-option
                        v-for="dict in cfg_category_pzbm"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="成立时间" prop="establishDate" v-if="form.subjectClassId==='1'">
                    <el-date-picker clearable
                        v-model="form.establishDate"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择成立时间">
                    </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="组成形式" prop="formId"  v-if="form.subjectClassId==='2'">
                    <el-select v-model="form.formId" placeholder="请选择组成形式">
                        <el-option
                        v-for="dict in cfg_category_zcxs"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="组成方式" prop="formId" v-else-if="form.subjectClassId==='1'">
                    <el-select v-model="form.formId" placeholder="请选择组成方式">
                        <el-option
                        v-for="dict in cfg_category_zcfs"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="组成类型" prop="formClsId" v-if="form.subjectClassId==='1'">
                    <el-select v-model="form.formClsId" placeholder="请选择组成类型">
                        <el-option
                        v-for="dict in cfg_category_zclx"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">

                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="国民经济行业" prop="gmjjhy">
                    <el-tree-select v-model="form.gmjjhy" placeholder="请选择国民经济行业"
                        :data="cfg_category_gmjjhy_filter"
                        :filter-method="filterMethod"
                        :filter-node-method="filterNodeMethod"
			            filterable
                    />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学科分类" prop="subjectId" >
                    <el-select v-model="form.subjectId" placeholder="请选择学科分类" @change="handleChangeSubjectId">
                        <el-option
                        v-for="dict in cfg_category_yjxk"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="二级学科" prop="subjectIdSub" v-if="form.subjectClassId==='2'">
                    <el-select v-model="form.subjectIdSub" placeholder="请选择二级学科">
                        <el-option
                        v-for="dict in cfg_category_ejxk"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="博士毕业" prop="doctorNum">
                        <el-input-number v-model="form.doctorNum" :controls="false" :step="1" :step-strictly="true" class="suffixTarget" style="width:56px">
                            <!-- <template #suffix>
                                <span>人</span>
                            </template> -->
                        </el-input-number>
                        <span class="suffix">人</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="硕士" prop="masterNum">
                        <el-input-number v-model="form.masterNum" :controls="false" :step="1" :step-strictly="true" class="suffixTarget" style="width:56px"></el-input-number>
                        <span class="suffix">人</span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="培养研究生" prop="graduateStuNum">
                        <el-input-number v-model="form.graduateStuNum" :controls="false" :step="1" :step-strictly="true" class="suffixTarget" style="width:56px"></el-input-number>
                        <span class="suffix">人</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-form-item label="科技活动人员合计" prop="activePersNum" :label-width="136">
                    <el-input v-model="activePersNumComputed" class="suffixTarget" style="width:80px" disabled/>
                    <span class="suffix">人</span>
                </el-form-item>
                <el-form-item label="=" prop="seniorNum" :label-width="30">
                    <span class="prefix">高级职称</span>
                    <el-input-number v-model="form.seniorNum" :controls="false" :step="1" :step-strictly="true" class="prefixTarget suffixTarget" style="width:60px"></el-input-number>
                    <span class="suffix">人</span>
                </el-form-item>
                <el-form-item label="+" prop="intermediateNum" :label-width="30">
                    <span class="prefix">中级职称</span>
                    <el-input-number v-model="form.intermediateNum" :controls="false" :step="1" :step-strictly="true" class="prefixTarget suffixTarget" style="width:60px"></el-input-number>
                    <span class="suffix">人</span>
                </el-form-item>
                <el-form-item label="+" prop="primaryNum" :label-width="30">
                    <span class="prefix">初级职称</span>
                    <el-input-number v-model="form.primaryNum" :controls="false" :step="1" :step-strictly="true" class="prefixTarget suffixTarget" style="width:60px"></el-input-number>
                    <span class="suffix">人</span>
                </el-form-item>
                <el-form-item label="+" prop="othersNum" :label-width="30">
                    <span class="prefix">其他</span>
                    <el-input-number v-model="form.othersNum" :controls="false" :step="1" :step-strictly="true" class="prefixTarget suffixTarget" style="width:60px"></el-input-number>
                    <span class="suffix">人</span>
                </el-form-item>
            </el-row>

            <el-row :gutter="20">
                <el-form-item label="承担项目" prop="chargedProNum" v-if="form.subjectClassId==='2'" :label-width="136">
                    <el-input-number v-model="form.chargedProNum" :controls="false" :step="1" :step-strictly="true" class="suffixTarget" style="width:122px"></el-input-number>
                    <span class="suffix">项</span>
                </el-form-item>
                <el-form-item label="当年经费内部支出" prop="curYearPay" v-if="form.subjectClassId==='2'" :label-width="200">
                    <el-input-number v-model="form.curYearPay" @change="handleDecimal1" :controls="false" class="suffixTarget" style="width:160px"></el-input-number>
                    <span class="suffix">万元</span>
                </el-form-item>
                <el-form-item label="" prop="curyearRdPay" :label-width="20" v-if="form.subjectClassId==='2'">
                    <span class="prefix">其中R&D支出</span>
                    <el-input-number v-model="form.curyearRdPay" @change="handleDecimal2" :controls="false" class="prefixTarget suffixTarget" style="width:120px"></el-input-number>
                    <span class="suffix">万元</span>
                </el-form-item>
            </el-row>

            <el-row :gutter="20">
                <el-form-item label="RD经费支出" prop="rdPay" v-if="form.subjectClassId==='1'" :label-width="136">
                    <el-input-number v-model="form.rdPay" @change="handleDecimal3" :controls="false" class="suffixTarget" style="width:108px"></el-input-number>
                    <span class="suffix">万元</span>
                </el-form-item>
                <el-form-item label="固定资产原值" prop="assetsValue" v-else-if="form.subjectClassId==='2'" :label-width="136">
                    <el-input-number v-model="form.assetsValue" @change="handleDecimal4" :controls="false" class="suffixTarget" style="width:108px"></el-input-number>
                    <span class="suffix">万元</span>
                </el-form-item>
                <el-form-item label="仪器设备原价" prop="originalCost" :label-width="200">
                    <el-input-number v-model="form.originalCost" @change="handleDecimal5" :controls="false" class="suffixTarget" style="width:160px"></el-input-number>
                    <span class="suffix">万元</span>
                </el-form-item>
                <el-form-item label="" prop="importCost" :label-width="20">
                    <span class="prefix">其中：进口</span>
                    <el-input-number v-model="form.importCost" @change="handleDecimal6" :controls="false" class="prefixTarget suffixTarget" style="width:120px"></el-input-number>
                    <span class="suffix">万元</span>
                </el-form-item>
            </el-row>
        </el-card>
    </el-form>
</template>

<script setup name="EducationStatEdit">
//import useUserStore from '@/store/modules/user';
import cloneDeep from 'lodash/cloneDeep';  
import CardHead from "./CardHead.vue";
import { getOverPastYearOptions, getCategoryData } from "@/api/research/unit";
import { listEducationStat, isExistStatYear, getEducationStat, delEducationStat, addEducationStat, updateEducationStat } from "@/api/research/educationStat";

const { proxy } = getCurrentInstance();

const emit = defineEmits(['educationStatAddSuccess', 'educationStatUpdateSuccess']);

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  opType: {  
    type: Number,
    required: false, //true,
    default: 0       // 默认值  0:add 1:edit 2:check 3:view
  },
//   opUnitInfo: {  
//     type: Object,
//     required: true,
//   },
  opUnitId: {
    type: String,
    required: true,
  },
  educationStatId: {
    type: String,
    required: false,   
  },
  appointYear: {
    type: String,
    required: false,   
  },
})

const data = reactive({
  form: {},
  curRules: {},
  rules: {
    statYear: [
      { required: true, message: "统计年度不能为空", trigger: "change" }
    ],
    subjectClassId: [
      { required: true, message: "归属统计不能为空", trigger: "change" }
    ],
    unitType: [
      { required: true, message: "机构类型不能为空", trigger: "change" }
    ],
    formId: [
      { required: true, message: "组成形式不能为空", trigger: "change" }
    ],
    gmjjhy: [
      { required: true, message: "国民经济行业不能为空", trigger: "change" }
    ],
    subjectId: [
      { required: true, message: "学科分类不能为空", trigger: "change" }
    ],
    doctorNum: [
      { required: true, message: "博士不能为空", trigger: "blur" }
    ],
    masterNum: [
      { required: true, message: "硕士不能为空", trigger: "blur" }
    ],
    graduateStuNum: [
      { required: true, message: "培养研究生不能为空", trigger: "blur" }
    ],
    activePersNum: [
      { required: true, message: "科技活动人员不能为空", trigger: "blur" }
    ],
    originalCost: [
      { required: true, message: "仪器设备原价不能为空", trigger: "blur" }
    ],
  },
  rules1: {
    formClsId: [
      { required: true, message: "组成类型不能为空", trigger: "change" }
    ],
    establishDate: [
      { required: true, message: "成立时间不能为空", trigger: "blur" }
    ],
    approvalDept: [
      { required: true, message: "批准部门不能为空", trigger: "change" }
    ],
    rdPay: [
      { required: true, message: "RD经费支出不能为空", trigger: "blur" }
    ],
  },
  rules2: {
    unitClsType: [
      { required: true, message: "机构类别不能为空", trigger: "change" }
    ],
    subjectIdSub: [
      { required: true, message: "二级学科不能为空", trigger: "change" }
    ],
    chargedProNum: [
      { required: true, message: "承担项目不能为空", trigger: "blur" }
    ],
    curYearPay: [
      { required: true, message: "当年经费内部支出不能为空", trigger: "blur" }
    ],
    assetsValue: [
      { required: true, message: "固定资产原值不能为空", trigger: "blur" }
    ]
  }
});

const { form, curRules, rules, rules1, rules2 } = toRefs(data);

const activePersNumComputed = computed(() => {
    form.value.activePersNum = form.value.seniorNum + form.value.intermediateNum + form.value.primaryNum + form.value.othersNum;
    return form.value.activePersNum;
});

const cfg_category_jybtjgs = ref([]);
const cfg_category_pzbm = ref([]);
const cfg_category_jgxz = ref([]);
const cfg_category_jglx = ref([]);
const cfg_category_jglb = ref([]);
const cfg_category_zcxs = ref([]);
const cfg_category_zcfs = ref([]);
const cfg_category_zclx = ref([]);
const cfg_category_gmjjhy = ref([]);
const cfg_category_gmjjhy_filter = ref([]);
const cfg_category_yjxk = ref([]);
const cfg_category_ejxk = ref([]);
const cfg_category_ejxk_all = ref([]);

const yearOptions = ref([]);
const title = ref("");

const selectedIds = ref([]);
const isAllSelected = ref(false);
watch(selectedIds, () => {
    if (form.value.subjectClassId === "1") {
        const ids = getAllIds(cfg_category_jglx.value);
        isAllSelected.value = ids.length > 0 && Array.isArray(selectedIds.value) && selectedIds.value.length === ids.length;
        form.value.unitType = selectedIds.value.join(",");
    }
});

// watch(props, () => {  
//   reset();
//
//   if (props.educationStatId) {
//     getEducationStat(props.educationStatId).then(response => {
//         form.value = response.data;
//         selectedIds.value = form.value.unitType ? form.value.unitType.split(",") : [];
//         getCfgCategoryEjxk();
//     });
//   }
// }, { deep: true });

onMounted(() => {
  yearOptions.value = getOverPastYearOptions(10,true);

  getCategoryData(cfg_category_jybtjgs, {bizName:"教育部统计归属"});
  getCategoryData(cfg_category_gmjjhy, {bizName: "国民经济行业"}, false, ()=>{cfg_category_gmjjhy_filter.value = cloneDeep(cfg_category_gmjjhy.value);});   //国民经济行业      树状
  getCategoryData(cfg_category_yjxk, {bizName: "一级学科"}, true);                          //一级学科

  getCategoryData(cfg_category_ejxk_all, {bizName: "二级学科"});                            //科技类    全部二级学科
  getCategoryData(cfg_category_jgxz, {bizName: "平台_教育部统计机构类型_科技类"});            //科技类    机构类型          单选
  getCategoryData(cfg_category_jglb, {bizName: "平台_教育部统计机构类别_科技类"}, true);      //科技类    机构类别
  getCategoryData(cfg_category_zcxs, {bizName: "平台_教育部统计组成形式_科技类"}, true);      //科技类    组成形式

  getCategoryData(cfg_category_pzbm, {bizName: "平台_教育部统计批准部门_社科类"}, true);      //社科类    批准部门
  getCategoryData(cfg_category_jglx, {bizName: "平台_教育部统计机构类型_社科类"});            //社科类    机构类型          树状
  getCategoryData(cfg_category_zcfs, {bizName: "平台_教育部统计组成方式_社科类"}, true);      //社科类    组成方式
  getCategoryData(cfg_category_zclx, {bizName: "平台_教育部统计组成类型_社科类"}, true);      //社科类    组成类型

  reset();

  if (props.educationStatId) {
    getEducationStat(props.educationStatId).then(response => {
        form.value = response.data;
        selectedIds.value = form.value.unitType ? form.value.unitType.split(",") : [];
        getCfgCategoryEjxk();
    });
  } else if(props.appointYear) {
      form.value.statYear = props.appointYear;
  }
})

function switchRules() {
    curRules.value = {...rules.value,  ...(form.value.subjectClassId==='2' ? rules2.value : rules1.value)}
}

function handleChangeStatYear(params, a, b) {
    if(form.value.statYear){
        isExistStatYear({id:form.value.id, researchUnitId:form.value.researchUnitId, statYear:form.value.statYear}).then(response => {
            if( response.data ){
                proxy.$modal.msgError("已经做了当前年度的统计，请重新选择统计年度！");
                form.value.statYear = null;
            }
        });
    }
}

function handleDecimal(value) {
    if (value !== null && value !== '') {  
        const valueStr = value.toString();  
        const decimalIndex = valueStr.indexOf('.');
        if (decimalIndex !== -1) {  
            const integerPart = valueStr.substring(0, decimalIndex);
            const decimalPart = valueStr.substring(decimalIndex + 1, decimalIndex + 7);
            return decimalPart.length > 0 ? Number(parseFloat(integerPart + '.' + decimalPart).toFixed(decimalPart.length)) : parseInt(integerPart);
        }
    }
    return value;
}
function handleDecimal1(value) { form.value.curYearPay = handleDecimal(value);}
function handleDecimal2(value) { form.value.curyearRdPay = handleDecimal(value) }
function handleDecimal3(value) { form.value.rdPay = handleDecimal(value) }
function handleDecimal4(value) { form.value.assetsValue = handleDecimal(value) }
function handleDecimal5(value) { form.value.originalCost = handleDecimal(value) }
function handleDecimal6(value) { form.value.importCost = handleDecimal(value) }

function handleChangeSubjectClassId(params) {
    if (form.value.subjectClassId === '1') {//切换到社科类
        form.value.formId = null;
        form.value.unitType = null;

        isAllSelected.value = false;
        selectedIds.value = [];
    } else if (form.value.subjectClassId === '2') {//切换到科技类
        form.value.formId = null;
        //form.value.unitType = null;
        form.value.unitType = "0"; 
        
        // isAllSelected.value = false;
        // selectedIds.value = [];
    }

    switchRules();
}

function handleChangeSubjectId(params) {
    //学科分类发生变化时，清空二级学科
    form.value.subjectIdSub = null;
    getCfgCategoryEjxk()
}

function getCfgCategoryEjxk() {
    //getCategoryData(cfg_category_ejxk, {bizName: "二级学科", valueCascade: form.value.subjectId});
    let node = cfg_category_ejxk_all.value.find(item => item.value === form.value.subjectId)
    if (node) {
        cfg_category_ejxk.value = node.children;
    } else {
        cfg_category_ejxk.value = [];
    }
}

function treeDataFilter1(data, query) {
    if (!query || !Array.isArray(data) ) {
        return;
    }

    for (let index=data.length-1;index>=0;index--) {
        const element = data[index];
        if (element.label.includes(query)) {
            continue;
        }
        const children = element.children
        if (Array.isArray(children)) {
            treeDataFilter1(children, query)
            if (children.length > 0) {
                continue;
            }
        }
        data.splice(index, 1);
    }
}

function filterMethod(value) {
    cfg_category_gmjjhy_filter.value = cloneDeep(cfg_category_gmjjhy.value);
    treeDataFilter1(cfg_category_gmjjhy_filter.value, value);
}

function filterNodeMethod(value,node) {
    return true;
}

function handleChangeUnitType1(params) {
    //form.value.unitType = selectedIds.value.join(",");
}

function toggleSelectAll() {
    if (!isAllSelected.value) {  
        selectedIds.value = [];
        form.value.unitType = "";
    } else {  
        selectedIds.value = getAllIds(cfg_category_jglx.value);
        form.value.unitType = selectedIds.value.join(",");
    }
}

function getAllIds(data) {  
    let ids = [];  
    data.forEach(node => {
        //if (Array.isArray(node.children) && node.children.length > 0) {  
        if (Array.isArray(node.children)) {  
            ids = ids.concat(getAllIds(node.children));
        } else {
            ids.push(node.value);
        }
    });
    return ids;  
}

function reset() {
  form.value = {
    id: null,
    //researchUnitId: props.opUnitInfo.id,
    researchUnitId: props.opUnitId,
    statYear: null,
    subjectClassId: "2",
    unitType: "0",                                                                     //机构类型                  特殊   共有   但字典不一样
    unitClsType: null,            //机构类别  仅科技类
    formId: null,                                                                       //组成形式     组成方式      特殊   共有   但字典不一样
    formClsId: null,                                            //组成类型  仅社科类 
    gmjjhy: null,
    subjectId: null,
    subjectIdSub: null,           //二级学科  仅科技类
    establishDate: null,                                        //成立时间  仅社科类       
    approvalDept: null,                                         //批准部门  仅社科类  
    doctorNum: null,
    masterNum: null,
    graduateStuNum: null,
    //activePersNum: computed(() => {return form.value.seniorNum + form.value.intermediateNum + form.value.primaryNum + form.value.othersNum}),
    activePersNum: null,
    seniorNum: null,
    intermediateNum: null,
    primaryNum: null,
    othersNum: null,
    chargedProNum: null,          //承担项目  仅科技类
    curYearPay: null,             //当年经费内部支出  仅科技类
    curyearRdPay: null,           //其中R&D支出  仅科技类
    rdPay: null,                                                //R&D经费支出  仅社科类
    originalCost: null,
    importCost: null,
    assetsValue: null,            //固定资产原值  仅科技类
  };
  proxy.resetForm("educationStatRef");

  isAllSelected.value = false;
  selectedIds.value = [];

  switchRules();
  getCfgCategoryEjxk();
}

function save() {
  proxy.$refs["educationStatRef"].validate(valid => {
    if (valid) {
        form.value.activePersNum = activePersNumComputed.value;
        if (form.value.subjectClassId === '1') {//社科类
            //清空仅科技字段
            form.value.unitClsType = null;
            form.value.subjectIdSub = null;
            form.value.chargedProNum = null;
            form.value.curYearPay = null;
            form.value.curyearRdPay = null;
            form.value.assetsValue = null;
        } else if (form.value.subjectClassId === '2') {//到科技类   
            //清空仅社科字段
            form.value.formClsId = null;
            form.value.establishDate = null;
            form.value.approvalDept = null;
            form.value.rdPay = null;
        }

        //console.log(form.value);
        if (form.value.id != null) {
            updateEducationStat(form.value).then(response => {
                proxy.$modal.msgSuccess("修改成功");
                emit('educationStatUpdateSuccess');
                reset();
            });
        } else {
            addEducationStat(form.value).then(response => {
                proxy.$modal.msgSuccess("新增成功");
                emit('educationStatAddSuccess');
                reset();
            });
        }
    }
  });
}

function cancel() {
  reset();
}

defineExpose({save, cancel});
</script>

<style scoped lang="scss">
@import url("../index.scss");
:deep(.el-row) {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

:deep(.prefix) {  
    padding: 0px 4px;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 32px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: 0;
}

:deep(.prefixTarget .el-input .el-input__wrapper) {  
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

:deep(.suffix) {  
    padding: 0px 4px;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 32px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: 0;
}

:deep(.suffixTarget .el-input .el-input__wrapper),
:deep(.suffixTarget .el-input__wrapper) {  
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
</style>
